<template>
    <view class="collection_box">
        <view class="top"></view>
        <view class="info_box" v-for="(item,index) in collectionDatas">
            <view class="single_info_box" :key="item.dynamicVo.dynamicId">
                <view class="title_box">
                    <view class="ava_box" @click="goOthersHomepage(item.user.userId)">
                        <view class="avatar">
                            <image :src="item.user.userHeaderImage" mode="widthFix"></image>
                        </view>
                        <view class="person_info_box">
                            <view class="name_box">
                                <view class="name">{{item.user.userNickname}}</view>
                                <image class="icon" :src="sexIconSrc[item.user.userSex]" mode="widthFix"></image>
                            </view>
                            <view class="time_box">{{item.dynamicVo.displayTime}}</view>
                        </view>
                    </view>
                    <view class="single_date">
                        <!-- 收藏图标 -->
                        <image class="collection_icon" :src="item.collectionBigIconSrc||collectionBigIconSrc" mode="widthFix"
                            @click="isCollection(index)"></image>
                    </view>
                </view>
                <view class="single_collection_desc" @click="goOthersDetailpage(item.dynamicVo.dynamicId)">{{item.dynamicVo.dynamicDescribe}}</view>
                <!-- 图片容器 -->
                <view class="img_box" v-for="(item1,index) in item.dynamicVo.dynamicImage">
                    <view class="single_img_box" :key="item1.dynamicId">
                        <image :src="item1.dynamicImage" mode="widthFix"></image>
                    </view>
                </view>
                <view class="behavior_box">
                    <view class="single_behavior">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon36.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num">{{item.collectionNum}}</text>
                    </view>
                    <view class="single_behavior">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon5.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num comment_icon">{{item.commentNum}}</text>
                    </view>
                    <view class="single_behavior">
                        <view class="behavior_icon">
                            <image src="/static/icon/img_icon6.png@2x.png" mode="widthFix"></image>
                        </view>
                        <text class="num">{{item.pickNum}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0,
                collectionBigIconSrc: "/static/icon/img_icon1.png@2x.png",
                sexIconSrc: {
                    "男": "/static/icon/img_icon19.png@2x.png",
                    "女": "/static/icon/img_icon20.png@2x.png"
                },
                collectionDatas: []
            }
        },
        methods: {
            //去他人的个人主页
            goOthersHomepage(id) {
                uni.navigateTo({
                    url: '/components/me/othershomepage?userId=' + id
                });
            },
            //去详情页
            goOthersDetailpage(id) {
                uni.navigateTo({
                    url: '/pages/contribute/details?id=' + id
                });
            },
            //取消，添加收藏
            // isCollection(index){
            //         if(this.collectionDatas[index].collectionBigIconSrc==undefined||this.collectionDatas[index].collectionBigIconSrc=="/static/icon/img_icon1.png@2x.png"){
            //             this.collectionDatas[index].collectionBigIconSrc="/static/icon/img_icon4.png@2x.png"
            //             console.log(this.collectionDatas[index])
            //         }else if(this.collectionDatas[index].collectionBigIconSrc==="/static/icon/img_icon4.png@2x.png"){
            //             this.collectionDatas[index].collectionBigIconSrc="/static/icon/img_icon1.png@2x.png"
            //             console.log(this.collectionDatas[index].collectionBigIconSrc)
            //         }

            // },
            //请求收藏数据
            getPersonData() {
                const token = uni.getStorageSync('token');
                this.$request('/comic-time/personal/mycollection', {
                    "pageNo": 1,
                    "pageTol": 5
                }, 'GET', {
                    'Authorization': token,
                }).then(res => {
                    console.log(res)
                    this.collectionDatas = res.data
                    console.log(this.collectionDatas);
                });
            }
        },
        mounted() {
            this.getPersonData()
        }
    }
</script>

<style lang="scss" scoped>
    $hign:calc(100vh - 44px);

    .collection_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .info_box {
            width: 750rpx;

            .single_info_box {
                width: 750rpx;
                // height: 437rpx;
                border-bottom: 10rpx solid #e5e5e5;
                background-color: #ffffff;
                box-sizing: border-box;
                padding: 20rpx 30rpx;


                .title_box {
                    height: 77rpx;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-buttom: 15rpx;

                    .ava_box {
                        height: 77rpx;
                        // width: 246rpx;
                        display: flex;

                        align-items: center;

                        .avatar {
                            width: 60rpx;
                            height: 60rpx;
                            background-color: #1389cd;
                            border-radius: 50%;
                            overflow: hidden;
                            margin-right: 15rpx;

                            image {
                                width: 60rpx;
                                // height: 60rpx;
                            }
                        }


                        .person_info_box {
                            width: 400rpx;
                            height: 60rpx;
                            font-family: PingFangSC-Medium;
                            font-size: 28rpx;
                            line-height: 30rpx;
                            color: #000000;
                            display: flex;
                            flex-wrap: wrap;

                            .name_box {
                                width:400rpx;
                                display: flex;

                                .name {
                                    height: 30rpx;
                                    margin-right: 10rpx;
                                }

                                .icon {
                                    width: 30rpx;
                                    height: 30rpx;
                                }
                            }

                            .time_box {
                                font-family: PingFangSC-Regular;
                                font-size: 20rpx;
                                line-height: 20rpx;
                                color: #999999;
                            }
                        }
                    }

                    .single_date {
                        // width: 111rpx;
                        height: 20rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .collection_icon {
                            width: 37rpx;
                            height: 35rpx;
                            margin-left: 10rpx;
                        }
                    }
                }

                .single_collection_desc {
                    width: 692rpx;
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    line-height: 48rpx;
                    color: #333333;
                    text-align: justify;
                }

                .img_box {
                    height: 222rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: flex-start;

                    .single_img_box {
                        width: 223rpx;
                        height: 222rpx;
                        background-color: #1389cd;
                        border-radius: 10rpx;
                        overflow: hidden;
                        margin: 0 10rpx 10rpx 0;

                        image {
                            width: 223rpx;
                            height: 222rpx;
                        }
                    }

                    .single_img_box:nth-child(3n) {
                        margin-right: 0 !important;
                    }
                }

                .behavior_box {
                    height: 60rpx;
                    width: 692rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .single_behavior {
                        font-family: PingFangSC-Regular;
                        font-size: 24rpx;
                        line-height: 48rpx;
                        display: flex;
                        color: #ff5858;

                        .behavior_icon {

                            margin-right: 10rpx;

                            image {
                                width: 25rpx;
                                height: 24rpx;
                            }
                        }

                        .comment_icon {
                            color: #666666;
                        }
                    }
                }
            }
        }
    }
</style>
